import React from 'react';
import { Card } from 'antd';

// 标签云数据，包含字体大小和颜色
const tagCloudData = [
  { name: '鸿蒙', size: 40, color: '#22c55e' },
  { name: '模块化', size: 16, color: '#eab308' },
  { name: '人脸识别', size: 18, color: '#8b5cf6' },
  { name: 'Vue', size: 16, color: '#4fc08d' },
  { name: 'CSS3', size: 16, color: '#8b5cf6' },
  { name: 'HTML5', size: 18, color: '#84cc16' },
  { name: 'ES6', size: 16, color: '#6366f1' },
  { name: 'TypeScript', size: 16, color: '#14b8a6' },
  { name: 'html', size: 14, color: '#f97316' },
  { name: 'SCSS', size: 14, color: '#f43f5e' },
  { name: 'LESS', size: 14, color: '#f97316' },
  { name: '微信小程序', size: 16, color: '#f59e0b' },
  { name: '百度', size: 16, color: '#ec4899' },
  { name: '高德', size: 14, color: '#06b6d4' },
  { name: 'React', size: 16, color: '#61dafb' },
  { name: 'TS', size: 14, color: '#14b8a6' },
  { name: 'uni-app', size: 16, color: '#06b6d4' },
  { name: '组件化', size: 16, color: '#3b82f6' },
  { name: 'Flutter', size: 16, color: '#ec4899' },
  { name: 'Javascript', size: 16, color: '#f7df1e' },
];

const HotSearchTags: React.FC = () => {
  return (
    <Card title="热门搜索" size="small" style={{ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', borderRadius: '8px', height: 240 }}>
      <div
        style={{
          position: 'relative',
          width: '100%',
          height: 140,
          padding: '10px'
        }}
      >
        {tagCloudData.map((tag, index) => {
          // 为每个标签分配固定位置，确保文字不重叠
          const getFixedPosition = (name: string) => {
            const positions: Record<string, { top: string; left: string }> = {
              '鸿蒙': { top: '50%', left: '50%' },
              '模块化': { top: '25%', left: '20%' },
              '人脸识别': { top: '30%', left: '70%' },
              'Vue': { top: '70%', left: '25%' },
              'CSS3': { top: '20%', left: '50%' },
              'HTML5': { top: '40%', left: '25%' },
              'ES6': { top: '60%', left: '75%' },
              'TypeScript': { top: '25%', left: '80%' },
              'html': { top: '80%', left: '40%' },
              'SCSS': { top: '60%', left: '30%' },
              'LESS': { top: '70%', left: '60%' },
              '微信小程序': { top: '40%', left: '75%' },
              '百度': { top: '80%', left: '65%' },
              '高德': { top: '30%', left: '40%' },
              'React': { top: '75%', left: '85%' },
              'TS': { top: '65%', left: '15%' },
              'uni-app': { top: '45%', left: '60%' },
              '组件化': { top: '55%', left: '20%' },
              'Flutter': { top: '45%', left: '85%' },
              'Javascript': { top: '20%', left: '30%' }
            };
            return positions[name] || { top: '50%', left: '50%' };
          };
          
          const position = getFixedPosition(tag.name);
          
          return (
            <span
              key={index}
              style={{
                position: 'absolute',
                fontSize: `${tag.size}px`,
                color: tag.color,
                fontWeight: tag.size > 30 ? 'bold' : 'normal',
                transform: 'translate(-50%, -50%)',
                top: position.top,
                left: position.left,
                opacity: 0.9,
                zIndex: tag.size > 30 ? 10 : Math.floor(tag.size),
                cursor: 'pointer',
                transition: 'all 0.3s ease',
                userSelect: 'none',
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1.2)';
                e.currentTarget.style.opacity = '1';
                e.currentTarget.style.zIndex = '100';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1)';
                e.currentTarget.style.opacity = '0.8';
                e.currentTarget.style.zIndex = tag.size > 30 ? '10' : Math.floor(tag.size).toString();
              }}
            >
              {tag.name}
            </span>
          );
        })}
      </div>
    </Card>
  );
};

export default HotSearchTags;